import React, { Component, PropTypes } from 'react';
import Echarts from 'echarts';
import { connect } from 'dva'
import {
  Input,
  Button,
  Select,
  Form,
  Modal,
  Row,
  Col,
  Icon,
  message,
} from 'antd';
import Style from './home.less';
import NumberPlay from '../../util/numberPlay';
import $ from 'jquery';
import Service from "../../service";
const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: 'none',
      userMDetail: {}
    };
  }
  componentDidMount() {
    const userMDetail = JSON.parse(localStorage.getItem('userMDetail'));
    this.setState({
      userMDetail: userMDetail
    })
    // console.log(userMDetail)
    // this.props.queryStatistics({ token: token });
  }
  componentWillUnmount() {
    if (this.state.timer != null) {
      clearInterval(this.state.timer);

    }
  }

  mindexurlFun = () => {
    this.context.router.push(`/1/app/mindex`);
  }
  mapurlFun = () => {
    this.context.router.push(`/1/app/mmap`);
  }
  myurlFun = () => {
    this.context.router.push(`/1/app/mmy`);
  }
  messageUrlFun = () => {
    this.context.router.push(`/1/app/mmessage`);
  }
  personalurlFun = () => {
    this.context.router.push(`/1/app/mpersonal`);
  }
  mregulationsurlFun = () => {
    this.context.router.push(`/1/app/mregulations`);
  }
  mstaticsManageurlFun = () => {
    this.context.router.push(`/1/app/mstaticsManage`);
  }
  // 关闭弹出框
  handleCancel = e => {
    this.setState({
      [e]: false
    });
  };
  // 退出确认
  isLayoutFun = () => {
    let self = this;
    self.setState({
      isLayout: true
    })
  }
  // 退出登录
  layoutSubmit = () => {
    let self = this;
    let token = localStorage.getItem('token');
    // console.log(token)
    self.props.Logout({ token: token, is_mobile: 1 });
    localStorage.setItem('token', '');
    localStorage.setItem('account', '');
    self.context.router.push(`/klogin`)
    self.setState({
      isLayout: false
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { data } = this.props;
    const { userMDetail } = this.state;
    // console.log(data);
    // console.log(this.props);
    return (
      <div className={Style.wrap + ' ' + Style.wrapH100}>
        <div className={Style.headMyWrap}>
          <div className={Style.navTitle}>
            <span className={Style.arrowEdit} onClick={this.messageUrlFun}><em className={Style.bellIcon}></em></span>
          </div>
        </div>

        <div className={Style.myWrap}>
          <div className={Style.myaccount}>
            <h2>{userMDetail.realname}</h2>
            <p>账号：{userMDetail.mobile}</p>
          </div>
        </div>
        <div className={Style.myWrapCon}>
          <div className={Style.conWrap}>
            <div className={Style.item}>
              <div className={Style.title}>
                42名
              </div>
              <p>
                <span className={Style.iconBg}>
                  <em className={Style.mypersonalIcon}></em>
                </span>
                我的人员
              </p>
            </div>
            <div className={Style.item}>
              <div className={Style.title}>
                42辆
              </div>
              <p>
                <span className={Style.iconBg}>
                  <em className={Style.mycarIcon}></em>
                </span>
                我的车辆</p>
            </div>
          </div>
        </div>
        <div className={Style.layoutWrap} onClick={this.isLayoutFun}>
          退出登录
        </div>
        {/* <div className={Style.foot}>
          <div className={Style.foot}>
            <Row type="flex">

              <Col span={4} order={1} onClick={this.mapurlFun}>
                <Icon style={{ fontSize: 20 }} type="environment" theme="outlined" /><p>大屏地图</p>
              </Col>
              <Col span={4} order={1} onClick={this.mstaticsManageurlFun}>
                <Icon style={{ fontSize: 20 }} type="area-chart" theme="outlined" /><p>数据分析</p>
              </Col>
              <Col span={4} order={1} onClick={this.mregulationsurlFun}>
                <Icon style={{ fontSize: 20 }} type="poweroff" theme="outlined" /><p>违章监控</p>
              </Col>
              <Col span={4} order={1} onClick={this.personalurlFun}>
                <Icon style={{ fontSize: 20 }} type="car" theme="outlined" /><p>人员/车辆</p>
              </Col>
              <Col span={4} order={1} onClick={this.mindexurlFun}>
                <Icon style={{ fontSize: 20 }} type="line-chart" theme="outlined" /><p>AI辅助</p>
              </Col>
              <Col span={4} order={1} className={Style.on} onClick={this.myurlFun}>
                <Icon style={{ fontSize: 20 }} type="user" theme="outlined" /><p>我的</p>
              </Col>
            </Row>
          </div>
        </div> */}
        <div className={Style.foot}>
          <Row type="flex">
            <Col span={8} order={1} onClick={this.mapurlFun}>
              <em className={Style.footicon + ' ' + Style.mapicon}></em>
              <p>大屏地图</p>
            </Col>
            <Col span={8} order={1} onClick={this.mindexurlFun}>
              <em className={Style.footicon + ' ' + Style.aiicon}></em>
              <p>AI系统</p>
            </Col>
            <Col span={8} order={1} onClick={this.myurlFun} className={Style.on}>
              <em className={Style.footicon + ' ' + Style.myicon}></em>
              <p>我的</p>
            </Col>

          </Row>
        </div>

        <Modal
          title=""
          visible={this.state.isLayout}
          //   onOk={this.handleOk}
          onCancel={this.handleCancel.bind(this, 'isLayout')}
          footer={null}
          centered={true}
          wrapClassName="modalConfirmWrap"
        >
          <div className="confirmWrap">
            <h2>确定要退出登录吗？
            </h2>
            <div className="confrimFoot">
              <span className="btn" onClick={this.handleCancel.bind(this, 'isLayout')}>取消</span>
              <span className="btn blue" onClick={this.layoutSubmit}>确定</span>
            </div>
          </div>

        </Modal>
      </div>
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  // console.log(state)
  return {
    data: state.vehicle.data,
    loading: !!state.loading.global
  }
}

function dispatchToProps(dispatch) {
  return {
    queryStatistics(payload, params) {
      dispatch({ type: 'vehicle/list', payload })
    },
    update(payload, params) {
      dispatch({ type: 'vehicle/update', payload })
    },
    receive(payload, params) {
      dispatch({ type: 'vehicle/receive', payload })
    },
    Logout(payload = {}) {
      dispatch({ type: 'myHome/Logout', payload })
    }
  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
